<template>
  <view :class="[theme, 'root']">
    <view v-for="order in appeals.list" :key="order.id" class="bg-21 br-20 oh p-30 mb-20">
      <view class="fd-row pb-30">
        <view class="ai-center">
          <u-image width="104" height="126" src="/static/img/otc/icon-token.png" />
          <text class="mt-12 color-27">通证</text>
        </view>
        <view class="ml-30 jc-sb f1 oh">
          <label>
            <text class="color-9">订单编号：</text>
            <text>{{ order.order_sn || "-" }}</text>
          </label>

          <view class="fd-row">
            <view class="mt-20 f1 mr-10 jc-sb oh">
              <label>
                <text class="color-9">申诉时间：</text>
                <text>{{ order.created_time || "-" }}</text>
              </label>
              <label class="mt-20 ai-start">
                <text class="color-9">申诉原因：</text>
                <text style="word-break: break-all;" class="f1">
                  {{ order.content || "-" }}
                </text>
              </label>
            </view>
            <u-image width="108" height="108"
              :src="`/static/img/otc/icon-${+order.status ? 'completed' : 'appeal'}.png`" />
          </view>
        </view>
      </view>
      <view v-if="!+order.status" class="pt-30 fd-row jc-end" style="border-top: 2rpx solid #333;">
        <view class="fd-row ai-center">
          <button @click="showRevokePopup(order)" hover-class="tap-hover" style="margin: 0 0 0 30rpx;"
            class="fs-28 br-50 color-3 bg-23 lh-50">
            撤回申诉
          </button>
        </view>
      </view>
    </view>

    <view class="mt-30 ai-center">
      <u-image v-if="!appeals.list.length" class="mt-60 mb-30" width="360" height="360" src="/static/img/blank.png"
        mode="aspectFit" />
      <u-loadmore :status="appeals.cache.status" is-dot :load-text="{
        loadmore: '轻轻上拉',
        loading: '努力加载中...',
        nomore: '暂无更多申诉记录'
      }" />
    </view>

    <u-modal @confirm="revoke" v-model="showPopup.revoke" @input="changePopup($event, 'revoke')"
      :cancel-color="$config.COLOR_9" :confirm-color="$config.COLOR_10" title="撤销订单" content="是否确定撤销订单？" />
  </view>
</template>

<script lang="ts" setup>

import { useMapState } from "@/common/libs/store";
import { pager } from "@/common/libs/utils";
import { onLoad, onReachBottom } from "@dcloudio/uni-app";
import { reactive } from "vue";

const { theme } = useMapState(["theme"]);
const { $config } = getApp().globalData!;

const showPopup = reactive({
  revoke: false,
});

const appeals = reactive({
  page: 0,
  limit: 20,
  list: [] as any[],
  cache: {
    page: 1,
    list: [] as any[],
    status: "nomore"
  },
  next: false,
})

const changePopup = (e: boolean, popupKey: keyof typeof showPopup) => {
  showPopup[popupKey] = e;
}

onLoad(() => {
  getAppeals();
});

onReachBottom(() => {
  getAppeals();
});

const getAppeals = () => {
  pager({ url: "/appealList" }, appeals);
}


let currentOrder: AnyObject = {};
const revoke = () => {
  uni.request({
    url: "/appealCancel",
    data: { order_id: currentOrder.ex_change_id },
    success() {
      uni.showToast({ title: "已撤销" });
      appeals.page = 0;
      appeals.list = [];
      appeals.cache = {
        page: 1,
        list: [] as any[],
        status: "nomore"
      };
      getAppeals();
    }
  })
}

const showRevokePopup = (order: AnyObject) => {
  currentOrder = order;
  showPopup.revoke = true;
}
</script>
<style lang="scss">
page {
  background-color: $uni-bg-color-otc;
  color: $uni-text-color-otc;
}
</style>
<style lang="scss" scoped>
// scss

.root {
  padding: 20rpx 30rpx;
}
</style>